<template>
  <div id="menuConfigCustomeruration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <span>标题配置</span>
        </div>
      </template>
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="营销图库" name="first">
          <containnerMain
            :dataList="dataList"
            @eventFirstTitle="handleEventFirstTitle"
            @handleClickDelete="handleClickDelete"
          ></containnerMain>
        </el-tab-pane>
        <el-tab-pane label="资源下载" name="second">
          <containnerMain
            :dataList="dataList"
            @eventFirstTitle="handleEventFirstTitle"
            @handleClickDelete="handleClickDelete"
          ></containnerMain>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import containnerMain from '../file/module/main.vue';
import marketing from '@/modules';
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';
const { addMarketingApi, marketingListApi, delclassApi } = marketing;
const activeName = ref('first');

const current = ref(0);
const dataList = ref([]);
const params = ref({
  type: 1,
});
const handleClickTab = (tab) => {
  current.value = tab.index;
  tab.index == 0 ? (params.value.type = 1) : (params.value.type = 2);
  marketingList();
};

// 新增一级标题事件
const handleEventFirstTitle = async (val) => {
  current.value == 0 ? (val.type = 1) : (val.type = 2);
  const { name, type, id, pid } = val;
  const data = await addMarketingApi({ name, type, id, pid });
  if (data.code == 20000) {
    ElMessage({
      message: data.msg,
      type: 'success',
    });
    marketingList();
  }
};
const saveDel = async (params) => {
  const data = await delclassApi(params);
  if (data.code == 20000) {
    ElMessage({
      message: data.msg,
      type: 'success',
    });
    marketingList();
  }
};
//删除标题
const handleClickDelete = (row) => {
  saveDel({ id: row.id });
};
// 营销图库
const marketingList = async () => {
  const { data } = await marketingListApi({
    type: params.value.type,
  });
  dataList.value = data;
};
onMounted(() => {
  marketingList();
});
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

.row-bg {
  .el-form-item {
    margin: 10px 0 20px;
  }
}

.alitem {
  .icon-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    /* 将光标设置为手型 */
    cursor: pointer;
  }
}
.img {
  width: 80px;
  height: 80px;
}
</style>
